<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head th:include="staff/template :: header">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    </head>
    
  <body class="main-body">
        <div class="container main-containern">
            <div th:substituteby="staff/template :: nav" />               
            <form id="form-horizontal" class="form-horizontal bs-docs-example" method="post" th:action="@{'/staff/management/students/update/'+${hocSinh.getmaHocSinh()}}">
                <div class="inner_form">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="maHocSinh">Mã Học Sinh</label>
                        <div class="col-md-6">
                          <input th:value="${hocSinh.getmaHocSinh()}" id="maHocSinh" name="maHocSinh" type="text" placeholder="Mã học sinh" class="validate[required] form-control input-md "/>                      
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4" for="hoTen">Họ Tên</label>
                        <div class="col-md-6">
                          <input th:value="${hocSinh.gethoTen()}" id="hoTen" name="hoTen" type="text" placeholder="" class="validate[required] form-control input-md"/>                      
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4" for="Giới Tính">Giới Tính</label>
                        <div class="col-md-6">
                            <span class="invisible span_select" th:id="${hocSinh.getgioiTinh()}"></span>
                            <select id="checkBox_edit" name="gioiTinh" class="validate[required] form-control custom_checkbox">
                                <option  value="1">Nam</option>
                                <option value="0">Nữ</option>                            
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4" for="ngaySinh">Ngày Sinh</label>
                        <div class="col-md-6">
                            <input  th:value="${#dates.format(hocSinh.getngaySinh(),'dd/MM/yyyy')}" th:if="${hocSinh.getngaySinh()}"  type="text" id="datepickerngaySinh" name="ngaySinh" class="form-control input-md "/>
                            <input th:unless="${hocSinh.getngaySinh()}" type="text" id="datepickerSinh" name="ngaySinh" class="form-control input-md " />
                        </div>
                    </div>                     
                    <div class="form-group">
                      <label class="control-label col-md-4" for="diaChi">Địa Chỉ</label>
                      <div class="col-md-6">                     
                        <textarea th:text="${hocSinh.getdiaChi()}" id="diaChi" name="diaChi" class="form-control"></textarea>
                      </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4" for="ngayNhapHoc">Ngày Nhập Học</label>
                        <div class="col-md-6">
                            <input th:value="${#dates.format(hocSinh.getngayNhapHoc(),'dd/MM/yyyy')}" th:if="${hocSinh.getngayNhapHoc()}" type="text" id="datepickerNhapHoc" name="ngayNhapHoc" class="form-control input-md " />
                            <input th:unless="${hocSinh.getngayNhapHoc()}" type="text" id="datepickerNhapHoc" name="ngayNhapHoc" class="form-control input-md" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4" for="ngayNghiHoc">Ngày Nghỉ Học</label>
                        <div class="col-md-6">
                            <input th:value="${#dates.format(hocSinh.getngayNghiHoc(),'dd/MM/yyyy')}" th:if="${hocSinh.getngayNghiHoc()}" type="text" id="datepickerNghiHoc" name="ngayNghiHoc" class="form-control input-md " />
                            <input th:unless="${hocSinh.getngayNghiHoc()}" type="text" id="datepickerNghiHoc" name="ngayNghiHoc" class="form-control input-md " />
                        </div>
                    </div>                      
                    <div class="form-group">   
                        <div class="col-md-4"></div>
                        <div class="col-md-6">
                            <button id="ThemBtn" name="ThemBtn" class="btn btn-primary min_width_button_normal margin_button_bottom">Cập Nhật</button>
                            <a th:href="@{/staff/management/students/index}" class="btn btn-default min_width_button_normal margin_button_bottom">Trở Lại</a>
                        </div>
                    </div>
                </div>
            </form>
            <div th:include="staff/template :: footer"></div>
        </div>	
        
        <script th:inline="javascript">
            /*<![CDATA[*/
               jQuery(document).ready(function() {
                jQuery("#form-horizontal").validationEngine();
                //update value for select 
                $("#checkBox_edit")[0].value = $("span.span_select")[0].id;
                COMMON.activeMenu("nav_hocsinh");
            });
            /*]]>*/
            var today = new Date();
            var yearToday = today.getFullYear();
            $(function() {
                $( "#datepickerngaySinh" ).datepicker({
                    yearRange: "1992:" + yearToday +"",
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd/mm/yy"
                });
                $( "#datepickerNhapHoc" ).datepicker({
                    yearRange: "2000:2023",
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd/mm/yy"
                });
                $( "#datepickerNghiHoc" ).datepicker({
                    yearRange: "2000:2023",
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd/mm/yy"
                });
                $('#maHocSinh').focus();
              });
              
        </script>    
    </body>
</html>